<template>
    <div style="display: flex;line-height: 60px;">
        <span style="flex:1; text-align: center; font-size: 35px; font-family:宋体;">
            <span>资料共享平台后台管理系统</span>
        </span>


        <span style="margin-right: 10px; font-size: 14px;">{{ username }}</span>
        <div class="toolbar">
            <el-dropdown style="margin-top: 20px;">
                <div>
                    <el-icon>
                        <setting />
                    </el-icon>
                </div>

                <template #dropdown>
                    <el-dropdown-menu>
                        <div v-show="is_login">
                            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                        </div>
                        <div v-show="!is_login">
                            <el-dropdown-item @click.prevent="to_login">去登录</el-dropdown-item>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import router from '@/router';
export default {
    name: "HeaderBoard",
    data() {
        let username = localStorage.getItem("CurUser");
        let is_login = localStorage.getItem("is_login");
        return {
            username,
            is_login,
        }
    },
    methods: {
        logout() {
            localStorage.clear();
            router.push({ name: "login" });
        },
        to_login() {
            router.push({ name: "login" });
        },
    }
}

</script>



<style scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>